<div style="padding-top: 15px; padding-bottom: 15px;">
	<div class="container">
		<a routerLink="/learn" class="btn btn-outline-dark" style="margin-top: 5px;">Back</a>
		<h2>Virtual Reality</h2>
		<h3>WebXR</h3>
		<p>WebXR is an open standard that makes it possible to experience VR and AR in your browser. The goal is to make it easier for everyone to get into expanded reality experiences, no matter what device you have. Is also allows for cross development of application to be run in different environments.</p>
		<p>Two things are required to experience a WebXR application, a headset and a compatible browser. The easiest way to get started is with a basic headset like Google Cardboard. Just drop your phone in and you’re ready to go. </p>

		<h3>Creating a project</h3>
		<p>To enable vr support on your project, click the program object on the object explorer, and select enable vr in the program panel as shown on the image bellow.</p>

		<img style="margin-left:20%; width:60%" src="assets/learn/basics/vr/editor.jpg"/>

		<p>Enabling WebXR will allow for the user to request vr rendering when the device has WebXR support, when in VR the camera in use will be repositioned automatically to match the HMD position and rotation in the real world. This means that the original camera position is lost when the vr mode is enabled.</p>
		<p>To prevent losing the camera position its recommended for VR applications to place the camera inside a container that can be used as reference and its able to keep it position attributed when rendering in vr mode.</p>
		<p>If everything works as expected you should see something similar to the example running bellow.</p>

		<app-viewer fname="assets/learn/basics/vr/vr.nsp"></app-viewer>

		<h3>Using Controllers</h3>
		<p>It is possible to access VR controllers from the renderer object directly attached to the program in the script objects. The controller object is automatically updated to match the physics controller position its coordinates can be used for interaction with objects in the scene. Its a regular Object3D object where other objects (e.g. Physics colliders, meshes) can be attached as children.</p>
		<pre><code class="hljs javascript">var controller = renderer.xr.getController(0);
controller.addEventListener("selectstart", (...));
controller.addEventListener("selectend", (...));
scene.add(controller);</code></pre>
	</div>
</div>
